<template>
    <div class="detail">
      <!-- 布尔属性 写了属性名相当于 :showArrow="true"-->
      <!-- <hm-header showArrow>面经详情</hm-header> -->
      <hm-header :showArrow="true" @clickLeft="fn">面经详情
        <!--测试组件库中的组件  -->
      
        <template #right>🔍</template>
      </hm-header>
      <!-- detail组件
      <van-button type="primary" @click="fn2">主要按钮</van-button>
       <van-button type="info">信息按钮</van-button>
       <van-button type="default">登录按钮</van-button>
       <van-button type="warning">警告按钮</van-button> -->
       <h1>{{ obj.stem }}</h1>
    <div class="info">
      <span>{{ obj.createdAt }}</span>
      <span>|</span>
      <span>{{ obj.views }} 浏览量</span>
      <span>|</span>
      <span>{{ obj.likeCount }} 点赞数</span>
    </div>

    <div class="qian">
      <img :src="obj.creatorAvatar" alt="" />
      <span>{{ obj.creatorName }}</span>
    </div>

    <div class="content">
      {{ obj.content }}
    </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    name: 'HmDetail',
    created() {
      //query参数 query收
      // console.log(this.$route.query.id)
      //动态路由传参 改路由表 params收
      
      // console.log(this.$route.params.id)
      this.getDetail(this.$route.params.id)
    },
    data() {
      return {
        obj: {},
      };
    },
    methods:{
      async getDetail(id){
        if(!id)return
        const res = await axios({
         url:`http://interview-api-t.itheima.net/h5/interview/show/?id=${id}`,
         headers: {
            Authorization:`Bearer ${localStorage.getItem('token')}`// 替换为实际的 token
         }
        })
        
        console.log(res)
        this.obj=res.data.data
      },
      fn(){
        // console.log('点击了返回')
        // this.$router.go(-1)
        this.$router.back()
      },
      fn2(){
       alert('点击了按钮')
      
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
.qian {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

.content {
  text-indent: 2em;
}
</style>